<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link type="text/css" rel="stylesheet" href="/static/css/style.css">
		<script src="/static/script/jquery.js"></script>
		<script>
			$(function () {
				$("#emptyCart").click(function () {
					return confirm("亲！确定要清空购物车吗？三思啊！~~~~(>_<)~~~~");
				});
				$(".deleteCartItem").click(function () {
					var title = $(this).attr("id");
					return confirm("确定要删除【" + title + "】这本图书吗？");
				});
				$(".updateCartItem").change(function () {
					var cartItemID = $(this).attr("id");
					var bookCount = $(this).val();
					var url = "/updateCartItem";
					var params = { "cartItemID": cartItemID, "bookCount": bookCount };
					var $tdEle = $(this).parent().next().next();
					$.post(url, params, function (res) {
						$("#totalCount").text(res.TotalCount);
						$("#totalAmount").text(res.TotalAmount);
						$tdEle.text(res.Amount);
					}, "json");
				});
			});
		</script>
	</head>

	<body>

		<div id="header">
			<!-- <img class="logo_img" alt="" src="/static/img/logo.gif" > -->
			<span class="wel_word">购物车</span>
			<div>
				<span>欢迎<span class="um_span">{{.Username}}</span>光临书城</span>
				<a href="/logout">注销</a>&nbsp;&nbsp;
				<a href="/">返回</a>
			</div>
		</div>

		<div id="main">
			{{if .Cart}}
			<table>
				<tr>
					<td>商品名称</td>
					<td>数量</td>
					<td>单价</td>
					<td>金额</td>
					<td>操作</td>
				</tr>
				{{range .Cart.CartItems}}
				<tr>
					<td>{{.Book.Title}}</td>
					<td>
						<input id="{{.ID}}" class="updateCartItem" type="number" min="1" value="{{.Count}}"
							style="text-align:center;width: 50px;" />
					</td>
					<td>{{.Book.Price}}</td>
					<td>{{.Amount}}</td>
					<td><a id="{{.Book.Title}}" class="deleteCartItem" href="/deleteCartItem?cartItemID={{.ID}}">删除</a>
					</td>
				</tr>
				{{end}}

			</table>

			<div class="cart_info">
				<span class="cart_span">购物车中共有<span class="b_count"
						id="totalCount">{{.Cart.TotalCount}}</span>件商品</span>
				<span class="cart_span">总金额<span class="b_price" id="totalAmount">{{.Cart.TotalAmount}}</span>元</span>
				<span class="cart_span"><a href="/">继续购物</a></span>
				<span class="cart_span"><a href="/deleteCart?cartID={{.Cart.ID}}" id="emptyCart">清空购物车</a></span>
				<span class="cart_span"><a href="/checkout">去结账</a></span>
			</div>
			{{else}}
			<br /><br /><br /><br /><br /><br /><br /><br /><br />
			<h1 style="text-align: center">快去<a href="/" style="color:red">购物</a>吧！</h1>
			{{end}}
		</div>

		<div id="bottom">
			<span>
				书城.Copyright &copy;2020.<a href="http://www.beian.miit.gov.cn/"></a>鄂ICP备20002228号</a>
			</span>
		</div>
	</body>

</html>